<template>
  <div class="goods">
    <headerNav title="商品详情" />
    <!-- 轮播 -->
    <div class="swiper_box">
      <van-swipe class="goods-swipe" :autoplay="3000">
        <van-swipe-item v-for="(thumb,index) in goods.itemPicResultDtos" :key="index">
          <img :src="thumb.narrowPicUrl" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 价格 -->
    <van-cell-group>
      <van-cell>
        <div class="goods-title">{{ goods.itemTitle }}</div>
        <span class="goods-price">￥{{goods.price}}</span>       
      </van-cell>    
    </van-cell-group>
    <!-- 详情 -->
    <div class="goods-info">
      <p class="goods-info-title">商品详情</p>
      <div>
        <p class="detailImg"  v-for="(thumb,index) in goods.itemPicResultDtos" :key="index">
          <img :src="thumb.narrowPicUrl" />
        </p>
      </div>
    </div>
    <van-goods-action>
      <!-- <van-goods-action-mini-btn icon="like-o" @click="sorry">收藏</van-goods-action-mini-btn> -->
      <!-- <van-goods-action-mini-btn icon="cart" @click="onClickCart">购物车</van-goods-action-mini-btn>
      <van-goods-action-big-btn @click="showSku">加入购物车</van-goods-action-big-btn> -->
      <van-goods-action-big-btn primary @click="showSku">立即购买</van-goods-action-big-btn>
    </van-goods-action>
    <!-- 属性 -->
    <van-sku
      v-model="showBase"
      :sku="skuData.sku"
      :goods="skuData.goods_info"
      :goods-id="skuData.goods_id"
      :quota="skuData.quota"
      :quota-used="skuData.quota_used"
      :hide-stock="skuData.sku.hide_stock"
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked"
    />
  </div>
</template>

<script>
import cart from "../../data/sku.js";
import { findGoodsByItemNo } from "../../api/page.js";

export default {
  components: {},
  data() {
    return {
      show: false,
      showTag: false,
      goods: {
        aaa:"dsd"
      },
      token:"",
      showBase: false,
      skuData:{
        sku: {
          tree: [],
          list: [],
          price: '',
          stock_num: 0,
          collection_id: 0,
          none_sku: true,
          messages: [],
          hide_stock: true
        },
        goods_id: '',
        alias: '2oml0r0n5vytj',
        quota: 0,
        is_virtual: '0',
        quota_used: 0,
        goods_info: {
          title: '',
          picture:"",
        }
      },
      customStepperConfig: {
        quotaText: "单次限购100件",
        stockFormatter: stock => `剩余${stock}间`,
        handleOverLimit: data => {
          const { action, limitType, quota } = data;
          if (action === "minus") {
            this.$toast("至少选择一件商品");
          }
        }
      },
    };
  },
  methods: {
    getData() {
      findGoodsByItemNo(this.$route.query.itemNo).then(response => {
        this.goods = response.data;
        this.skuData.goods_info.picture = response.data.narrowPicUrl;
        this.skuData.goods_info.title = response.data.itemTitle;
        this.skuData.sku.price = response.data.price;
        this.skuData.sku.stock_num = response.data.stockNum
        this.skuData.sku.collection_id = response.data.itemNo
      });
    },
    formatPrice(data) {
      return "¥" + (data / 100).toFixed(2);
    },
    onClickCart() {
      this.$router.push({name:"cart",query:{type:"detail"}});
    },
    sorry() {
      Toast("暂无后续逻辑~");
    },
    showPromotion() {
      this.show = true;
    },
    showSku() {
      this.showBase = true;
    },
    onClickShowTag() {
      this.showTag = true;
    },
    onBuyClicked(data) {
      if(this.token!=""){
        let patData = JSON.stringify(data);
        patData = JSON.parse(patData)
        let obj = { 
          "num": patData.selectedNum, 
          "itemNo": this.goods.itemNo,
          "itemName": this.goods.itemTitle,
          "itemNarrowPic": this.goods.narrowPicUrl,
          "price": this.goods.price,
          "allPrice":patData.selectedNum * this.goods.price
        }
        let arr = []
        arr.push(obj);
        this.$store.dispatch("setShopping", arr);
        this.$router.push({ name: "order",query:{Source:0}});
      }else{
        this.$toast("请先登录~");
        this.$router.push({ name: "login"});
      } 
    },
    onAddCartClicked(data) {
      let selData = JSON.stringify(data)
      selData = JSON.parse(selData)
      let obj = {
        "itemNo": this.goods.itemNo, 
        "catNo": this.goods.catNo, 
        "itemTitle": this.goods.itemTitle,
        "narrowPicUrl": this.goods.narrowPicUrl, 
        "num": selData.selectedNum, 
        "price": this.goods.price
      }
      cart.addproduct(obj);
      this.$toast("添加成功~");
      this.showBase = false
    }
  },
  mounted() {
    let userInfo = JSON.parse(window.localStorage.getItem("userInfo"));
    if(userInfo!=null && userInfo!=undefined){
      this.token = userInfo.token
    }
    this.getData();
  }
};
</script>

<style lang="less" scoped>
.goods {
  padding-bottom: 50px;
  .swiper_box{
    height: 4rem;
    overflow-y: hidden;
  }
  .goods-swipe {
    height: 100%;
    img{
      width: 100%;
    }
    .detailImg{
      margin-top: .1rem;
      display: block;
    }
  }
  &-swipe {
    img {
      width: 7.5rem;
      height: 7.5rem;
      display: block;
    }
  }
  &-tag {
    font-size: 12px;
    border-top: 1px solid #e5e5e5;
    span {
      margin-right: 10px;
    }
    i {
      color: red;
      margin-right: 3px;
    }
    img {
      width: 12px;
      margin-right: 3px;
      margin-top: 6px;
    }
  }
  &-title {
    line-height: 18px;
    padding-top: 10px;
    margin-bottom: 6px;
    font-size: 14px;
    color: #333;
    font-weight: 700;
  }
  &-subtit {
    font-size: 13px;
    color: #333;
    line-height: 21px;
  }
  &-price {
    color: #f44;
    font-size: 20px;
  }
  &-market-price {
    text-decoration: line-through;
    margin-left: 8px;
    font-size: 13px;
    color: #999;
  }
  &-cell-group {
    margin: 15px 0;
    .van-cell__value {
      color: #999;
    }
  }
  &-info-title {
    height: 44px;
    line-height: 44px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    margin: 10px;
    border-top: 1px solid #e5e5e5;
  }
  &-info p {
    margin: 0;
    padding: 0;
    margin-block-end: 0;
    margin-block-start: 0;
    display: grid;
  }
  &-info img {
    width: 100%;
  }
}
</style>
